<template>
  <CategorySelector :disabled="!isShowAttrList" />

  <AttrList
    v-if="isShowAttrList"
    @setIsShowAttrList="isShowAttrList = $event"
    @setAttr="attr = $event"
  />

  <SaveOrUpdateAttr
    v-else
    @setIsShowAttrList="isShowAttrList = $event"
    @setAttr="attr = $event"
    :attr="attr"
  />
</template>

<script lang="ts">
export default {
  name: 'XieAttr',
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import CategorySelector from '@/components/CategorySelector/index.vue'
import AttrList from './components/AttrList.vue'
import SaveOrUpdateAttr from './components/SaveOrUpdateAttr.vue'
import type { SaveAttrItem } from '@/api/product/model/attrModel'

const isShowAttrList = ref(true)
const attr = ref<SaveAttrItem>({
  attrName: '',
  attrValueList: [],
})
</script>

<style scoped></style>
